<template>
    <div class="biankuang">
        <div class="listProfile">

            <div class="up">
                <div>
                    <button type="button" class="btn btn-success" @click="active(1)">全部激活</button>
                </div>

                <div class="form-inline">
                    <span>共：{{remoteData.length}} 张，已激活：{{acCount}} 张 &nbsp;&nbsp;&nbsp;&nbsp;激活：{{acCount+1}} 至 </span>
                    <input class="form-control active-input" v-model="acCountText"/>
                    <button class="btn btn-success" @click="active(2, acCountText-acCount)">确定</button>
                </div>
            </div>

            <div class="listProfile_mid">
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr class="success">
                        <th>编号</th>
                        <th>二维码批号</th>
                        <th>品种名称</th>
                        <th>公司名称</th>
                        <th>生成时间</th>
                        <th>激活时间</th>
                        <th>扫描次数</th>
                        <th>失效日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in items">
                        <td>{{item.realcode}}</td>
                        <td>{{item.codePiNO}}</td>
                        <td>{{item.epname}}</td>
                        <td>{{item.typename}}</td>
                        <td>{{item.codecreatetime}}</td>
                        <td>{{item.codeActivetime}}</td>
                        <td>{{item.codescanftimes}}</td>
                        <td>{{item.codeOvertime}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="listProfile_down">
            <div class="footer">
                <div class="nextpage-body">
                    <div class="nextpage-body">
                        <button type="button" class="btn btn-success first-page" @click="nextPage(1)">首页</button>
                        <button type="button" class="btn btn-success pre-page" @click="nextPage(2)">上一页</button>
                        <button type="button" class="btn btn-success next-page" @click="nextPage(3)">下一页</button>
                        <button type="button" class="btn btn-success last-page" @click="nextPage(4)">尾页</button>
                        <span class="panel panel-default page-info">每页 {{rows}} 条，当前页：{{page}}， 总页数： {{count}}</span>
                        <input type="text" class="panel panel-default input-page" placeholder="输入..." v-model="go"/>
                        <button class="btn btn-success submit-page" type="button" @click="setData(go,rows)">跳转</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                items: [],
                page: 1,
                rows: 100,
                count: 0,
                remoteData: [],
                acCount: '',
                acCountText: ''
            }
        },
        ready: function () {
            var _this = this;
            var pino = _this.$route.params.pino;
            this.init(pino);
        },
        methods: {
            init: function (pino) {
                var _this = this;
                var url = '/QRcode/RealCodeList';
                var args = {"pino": pino};
                $.post(url, args).then(function (data) {
                    // 初始化配置信息
                    var temp = data.content.list.length / _this.rows;
                    _this.count = parseInt(temp);
                    if (temp > _this.count) {
                        _this.count++;
                    }
                    _this.page = 1;
                    _this.rows = 100;
                    // 保存远程数据
                    _this.acCount = data.content.acCount;
                    _this.remoteData = data.content.list;
                    _this.setData(_this.page, _this.rows);
                });
            },
            nextPage: function (sw) {
                var _this = this;
                switch (sw) {
                    case 1:
                        _this.page = 1;
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 2:
                        if (_this.page > 1) {
                            _this.page--;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 3:
                        if (_this.page < _this.count) {
                            _this.page++;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 4:
                        _this.page = _this.count;
                        _this.setData(_this.page, _this.rows);
                        break;
                }
            },
            setData: function (page, rows) {
                var _this = this;
                var list = _this.remoteData;
                // 清空当前数据
                _this.items = [];
                if (page < 1) {
                    page = 1;
                }
                if (page > _this.count) {
                    page = _this.count;
                }
                var index = (page - 1) * rows;
                // 每页10条记录
                for (var i = index; i < list.length && i < (index + rows); i++) {
                    var obj = {};
                    obj.realcode = list[i].realcode;
                    obj.codePiNO = list[i].codePiNO;
                    obj.epname = list[i].epname;
                    obj.typename = list[i].typename;
                    obj.codecreatetime = list[i].codecreatetime;
                    var Activetime = list[i].codeActivetime;
                    if (Activetime == null || Activetime == '') {
                        obj.codeActivetime = '未激活';
                    } else {
                        obj.codeActivetime = list[i].codeActivetime;
                    }
                    var scanftimes = list[i].codescanftimes;
                    if (scanftimes == null || scanftimes == '') {
                        obj.codescanftimes = '0';
                    } else {
                        obj.codescanftimes = list[i].codescanftimes;
                    }
                    obj.codeOvertime = list[i].codeOvertime;
                    _this.items.push(obj);
                }
            },
            active: function (choose, acCountText) {
                var pino = this.$route.params.pino;
                var args = {};
                if( choose == '1' ){
                    args = { "choose": 1, "pino": pino };
                }
                if( choose == '2' ){
                    args = { "choose": 2, "pino": pino, "acCount": acCountText };
                }
                $.post('/QRcode/QRcodeActive', args).then(function (data) {
                    if( data.status == 'success' ){
                        alert('激活成功');
                        window.location.reload();
                    }
                });
            }
        }
    }
</script>

<style>
    .up {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .listProfile .active-input {
        width: 70px;
    }

    .biankuang {
        background-color: #FFFFFF;
        border: 1px #1e88e5 solid;
        border-radius: 5px;
        padding: 10px;
    }

    .listProfile_mid {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .listProfile_down {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }

    .listProfile_down .footer {
        margin-bottom: 15px;
    }

    .listProfile_down .form-control {
        z-index: 0;
    }

    .listProfile_down .nextpage-body {
        text-align: center;
        height: 40px;
    }

    .listProfile_down .nextpage-body .first-page,
    .listProfile_down .nextpage-body .pre-page,
    .listProfile_down .nextpage-body .next-page,
    .listProfile_down .nextpage-body .last-page,
    .listProfile_down .nextpage-body .submit-page {
        width: 100px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .listProfile_down .nextpage-body .page-info {
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 35px;
    }

    .listProfile_down .nextpage-body .input-page {
        display: inline-block;
        padding: 0 5px 0 5px;
        width: 65px;
        height: 35px;
        line-height: 35px;
    }
</style>
